<template>
  <div>
    <Header></Header>
    <div class="block">
      <h2>{{ blog.title }}</h2>
      <el-link icon="el-icon-edit" v-if="ownBlog">
        <router-link :to="{name: 'BlogEdit', params:{blogId: blog.id}}">
          编辑
        </router-link>
      </el-link>
      <el-divider></el-divider>
      <div class="markdown-body" v-html="blog.content"></div>
    </div>
  </div>
</template>

<script>
    import Header from '../components/Header'
    //导入markdown样式，在后续渲染成HTML页面时还能够显示在markdown编辑器中设置的样式，像我们使用"#"来定义标题等等
    import 'github-markdown-css'
    export default {
        name: "BlogDetail",
        components: {
          Header: Header
        },
        data(){
          return {
            blog: {
              id: '',
              title: 'asd',
              desription: '',
              content: 'asd'
            },
            ownBlog: false
          }
        },
        created() {
          //从路由中获取当前博客id
          const blogId = this.$route.params.blogId;
          //调用接口获取博客数据
          this.$axios.get('/blog/'+blogId).then(result => {
            const blog = result.data.data;
            this.blog.id = blog.id;
            this.blog.desription = blog.desription;
            this.blog.title = blog.title;

            //渲染markdown格式的content部分，解析成HTML格式
            //获取markdown-it
            var MarkdownIt = require("markdown-it")
            var md = new MarkdownIt()
            //调用markdown-it的渲染工具进行渲染
            var result = md.render(blog.content)
            this.blog.content = result;

            this.ownBlog = (blog.userId === this.$store.getters.getUser.id);
          })
        }
    }
</script>

<style scoped>
  .block {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    min-height: 700px;
    padding: 20px 16px
  }
</style>
